<template>
	<div class="user">
		<div class="content">
			<div class="toplog">
				<img src="static/images/gray-head.png" alt="" />
				<div v-if="userLogin">
					<router-link to="login">登录/注册</router-link>
					<p>登录后可体验更多优质服务</p>
				</div>
				<div v-if="!userLogin" class="userSu">
					{{userName}},欢迎登录!
				</div>
			</div>
			<ul class="link_list">
				<li>
					<a href="javascript:;">我的定制</a><span class="list_item"><img src="static/images/customize.png" alt="" /></span><span class="right_arrow"></span></li>
				<li>
					<a href="javascript:;">我的收藏</a><span class="list_item"><img src="static/images/collect.png" alt="" /></span><span class="right_arrow"></span></li>
				<li>
					<a href="javascript:;">房产估值</a><span class="list_item"><img src="static/images/guzhi.png" alt="" /></span><span class="right_arrow"></span></li>
			</ul>
			<ul  class="link_list">
				<li>
					<a href="javascript:;">用户反馈</a><span class="list_item"><img src="static/images/user-feedback.png" alt="" /></span><span class="right_arrow"></span></li>
				<li>
					<a href="javascript:;">帮助</a><span class="list_item"><img src="static/images/help.png" alt="" /></span><span class="right_arrow"></span></li>
				<li>
					<router-link to='/about'>关于我们</router-link><span class="list_item"><img src="static/images/about-us.png" alt="" /></span><span class="right_arrow"></span></li>
			</ul>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				userLogin: true,
				userName: ''
			}
		},
		mounted: function() {
			var user = localStorage.getItem('user');
			if(user) {
				user = JSON.parse(user)
				this.userName = user.userName
				this.userLogin = false;
			}
		},
		methods: {
			clean: function() {
				localStorage.setItem('user', '')
			}
		}
	}
</script>
<style scoped>
	.user {
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: #f8f8f8;
	}
	
	.content {
		width: 100%;
		height: 100%;
		padding-top: 46px;
		background: url('/h5/static/images/top.jpg') no-repeat center top;
		background-size: 100% 150px;
	}
	
	.toplog {
		color: #fff;
		height: 68px;
		margin-bottom: 36px;
	}
	
	.toplog img {
		float: left;
		width: 68px;
		height: 68px;
		margin: 0 15px;
		border-radius: 50%;
	}
	
	.toplog a {
		color: #fff;
		display: block;
		padding: 15px 0 6px;
		font-size: 15px;
	}
	
	.toplog p {
		color: #fff;
		font-size: 12px;
	}
	
	.body00 .title0 {
		font-size: 14px;
		padding-bottom: 14px;
		padding-left: 18px;
		margin-top: 17px;
	}
	
	.body00 ul {
		padding: 0;
		margin: 0;
		list-style: none;
		display: flex;
		justify-content: space-around;
		font-size: 12px;
		color: #666;
		border-top: 1px solid #c6c6c6;
		border-bottom: 1px solid #c6c6c6;
		margin-bottom: 50px;
	}
	
	.body00 ul li {
		text-align: center;
		margin: 17px 0;
	}
	
	.body00 ul li span {
		display: block;
	}
	
	.body00 ul img {
		height: 35px;
	}
	
	.bg0 {
		background-color: #eee;
		height: 10px;
	}
	
	.userSu {
		line-height: 68px;
		font-size: 14px;
	}
	.link_list {
		list-style: none;
		padding: 0;
		margin: 0;
		margin-bottom: 10px;
		background-color: #fff;
	}
	.link_list li {
  		position: relative;
  		/*background-color: #f6f6f6;*/
	}
	.link_list li a {
		font-size: 14px;
		color: #000;
	    display: block;
	    height: 46px;
	    line-height: 46px;
	    margin-left: 15%;
		border-bottom: 1px solid #e2e2e2;
	}
	.link_list li:last-child a{
		border: none;
	}
	.link_list li .list_item {
		position: absolute;
		left: 0;
	    top: 0;
	    bottom: 0;
	    margin: auto;
	    width: 15%;
	    height: 40px;
	    /*background: #ccc;*/
	}
	.link_list li .list_item img {
		position: absolute;
		height: 20px;
		top: 10px;
		left: 50%;
		transform: translateX(-50%);
	}
	.link_list li .right_arrow{
		float: right;
	    border-right: 1px solid #999;
	    border-top: 1px solid #999;
	    -webkit-transform: rotate(45deg);
	    transform: rotate(45deg);
	    width: .6375rem;
	    height: .6375rem;
	    position: absolute;
	    right: .75rem;
	    top: 40%;
	    margin-right: 1.25rem;
	}
</style>